import styles from "./TabItemView.module.css";
import {FC} from "react";
import {Box, Button, ImageList, ImageListItem} from "@mui/material";
import DGFadeView from "../../../components/DGFadeView.tsx";
import DGListView from "../../../components/DGListView.tsx";
import DGFooterView from "../../../components/DGFooterView/DGFooterView.tsx";
import {LauncherRouteSoftware} from "../../../LauncherRouteSoftware.tsx";
import DGListViewItem from "../../../components/DGListViewItem.tsx";
import DGTextView from "../../../components/DGTextView.tsx";

interface TabItemViewProps {
    id: number,
    title: string,
}

const TabItemView: FC<TabItemViewProps> = ({id, title}) => {

    return (<DGFadeView time={1000} className={styles.TabItemView}>
        <Box className={styles.Content}>

            <DGTextView Title Bold style={{margin: "10px 0 20px 0", fontWeight: "bold"}}>正在查看：{title}</DGTextView>

            {/*应用列表*/}
            <DGListView NoBackground>
                {/* 使用MUI的 ImageListItem 类似瀑布流的布局 */}
                <ImageList variant="masonry" className={styles.ImageList}>

                    {/* 遍历路由应用列表 */}
                    {
                        LauncherRouteSoftware.filter(item => item['type'] === id)
                            .map((item, index) => (
                                <ImageListItem key={index} className={styles.ImageListItem}>
                                    {/* 列表选项按钮 */}
                                    <DGListViewItem
                                        avatar={item['icon']} title={item['name']} subText={item['desc']} Background>
                                        {/* 前往按钮 */}
                                        <Button>前往</Button>
                                    </DGListViewItem>
                                </ImageListItem>
                            ))
                    }

                    {/* 空数据 */}
                    {
                        LauncherRouteSoftware.filter(item => item['type'] === id).length < 1 &&
                        <ImageListItem className={styles.ImageListItem}>
                            <DGListViewItem title="暂无数据" Background/>
                        </ImageListItem>
                    }

                </ImageList>
            </DGListView>
        </Box>
        {/* 底部信息 */}
        <DGFooterView/>
    </DGFadeView>);
}
export default TabItemView;